<template>
  <div class="data-show">
    <div class="data-actions">
      <h3>{{ preTitle ? `${preTitle} - ${title}` : title }}</h3>
      <div class="data-title-counts" v-if="changable && false">
      <!-- <div class="data-title-counts" v-if="changable"> -->
        <el-tooltip content="未选择" placement="top">
          <span class="data-title-count" :class="{'current-unset': countUnSet != 0}">{{ countUnSet }}</span>
        </el-tooltip>
        <span class="data-title-count-line"></span>
        <el-tooltip content="当前" placement="top">
          <span class="data-title-count" :class="{'current-unset': !isSet}">{{ countCurrent }}</span>
        </el-tooltip>
        <span class="data-title-count-line"></span>
        <el-tooltip content="全部" placement="top">
          <span class="data-title-count">{{ countAll }}</span>
        </el-tooltip>
      </div>
    </div>
    <div class="data-table">
      <div v-if="changable" class="left step-action" :class="{disabled: countCurrent == 1}" @click="previous">
        <i class="iconfont step-icon icon-shangyibu"></i>
      </div>
      <div v-if="changable" class="right step-action" :class="{disabled: countCurrent == countAll}" @click="next">
        <i class="iconfont step-icon icon-xiayibu"></i>
      </div>
      <div class="data-list-top" v-if="isCondition">
        <!-- 筛选条件 -->
        <el-popover trigger="click" width="400" placement="top">
          <template #reference>
            <span class="data-condition-btn">筛选选项</span>
          </template>
          <div class="data-condition">
            <slot name="data-condition"></slot>
          </div>
        </el-popover>
        <div class="data-condition-show">
          <el-tag class="data-condition-item" v-for="(tag, index) in conditionList" :key="index" closable type="primary" size="large" @close="delCondition(tag)">
            {{ tag.label }}
          </el-tag>
        </div>
      </div>
      <div class="data-list-content" v-loading="loading" @scroll="scroll">
        <div class="data-list-content-inner" ref="content" v-if="list.length > 0">
          <el-radio :disabled="isDefault" @change="selectChange" class="data-list-item" v-model="selectId" v-for="(item, index) in list" :key="index" :label="item.name" :value="item.id">
            <span>{{ item.name }}</span>
            <span>{{ item.createTime }}</span>
          </el-radio>
        </div>
        <div class="data-list-content-empty" v-else>
          <i class="iconfont icon-wushuju1 data-list-content-empty-icon"></i>
          <h3 class="data-empty data-list-content-empty-text">暂无数据</h3>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
// ============> props
const props = defineProps({
  // 当前组件是否可切换
  changable: {
    type: Boolean,
    default: false
  },
  // 切换的组件总数
  countAll: {
    type: Number,
    default: 0
  },
  // 当前组件的位置
  countCurrent: {
    type: Number,
    default: 0
  },
  // 未进行选择数量
  countUnSet: {
    type: Number,
    default: 0
  },
  // 当前组件是否已经进行选择
  isSet: {
    type: Boolean,
    default: false
  },
  // 当前组件选项是否默认，是否默认已选择
  isDefault: {
    type: Boolean,
    default: false
  },
  // 预标题
  preTitle: {
    type: String
  },
  // 标题
  title: {
    required: true,
    type: String
  },
  // 当前组件是否可条件筛选
  isCondition: {
    type: Boolean,
    default: false
  },
  // 组件的参数对象
  condition: {
    required: true,
    type: Object,
    default: { title: ''}
  },
  // 已添加的筛选参数列表
  conditionList: {
    type: Array,
    default: []
  },
  // 选项数据列表
  list: {
    required: true,
    type: Array
  },
  // 是否加载中动画
  loading: {
    required: true,
    type: Boolean
  }
});
// ============> model
const selectId = defineModel('selectId');

// ============> data
const content = ref(null);
const emit = defineEmits(['getMore', 'handleSelect', 'previous', 'next', 'delCondition']);
let lastScrollTime = 0;

function delCondition(conditionItem){
  emit('delCondition', conditionItem.key);
}
// 点击上一步
function previous(){
  emit('previous');
}
// 点击下一步
function next(){
  emit('next');
}
// 选择事件
function selectChange(e){
  emit('handleSelect', e);
}
// 选项滚动
function scroll(e){
  const now = Date.now();
  if (now - lastScrollTime >= 150){
    lastScrollTime = now;
    if (e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight <= 10){
      emit('getMore');
    }
  }
}
</script>
<style lang='scss' scoped>
@import '@/assets/styles/mixin.scss';
.data-table {
  background-color: var(--color-gray-6);
  padding-bottom: 20px;
  position: relative;
}
.data-list-top,
.data-list-content {
  width: 60%;
  margin: 0 auto;
}
.data-list-top {
  height: 50px;
  display: flex;
  align-items: center;
  .data-condition {
    width: 400px;
  }
  .data-condition-show {
    margin: 0 20px;
    .data-condition-item {
      margin: 0 5px;
      background-color: var(--color-main-1);
      border-color: var(--color-main-2);
      color: var(--color-main);
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .4);
      &::v-deep .el-tag__close {
        color: var(--color-main);
        &:hover {
          background-color: var(--color-main);
          color: var(--el-color-white);
        }
      }
    }
  }
}
.data-condition-btn {
  font-size: 16px;
  cursor: pointer;
  color: var(--color-main);
  font-weight: bold;
  @include main-text-shadow;
}
.data-list-content {
  height: 200px;
  background-color: var(--color-white-10);
  border: 2px solid var(--color-gray-8);
  @include inset-shadow-gray-8;
  overflow-y: auto;
  @include scrollBar;
  .data-list-content-inner {
    width: 100%;
    .data-list-item.el-radio {
      @include flex-all-center;
      margin: 0;
      height: 40px;
      
      &::v-deep .el-radio__input {
        display: none;
      }
      &::v-deep .el-radio__label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 0 10px;
        // background-color: var(--color-main-1);
        background-color: var(--color-gray-2);
        border: 1px solid var(--color-main-3);
        color: var(--color-main);
        transition: all 0.3s linear;
      }
      // &:nth-child(odd)::v-deep .el-radio__label {
      //   background-color: var(--color-main-2);
      // }
    }
    .data-list-item.el-radio.is-checked::v-deep .el-radio__label {
      width: 98%;
      height: 90%;
      border: 2px solid var(--color-main-6);
      border-radius: 6px;
      background-color: var(--color-main);
      color: var(--color-white-10);
    }
    .data-list-item.el-radio:hover::v-deep .el-radio__label {
      background-color: var(--color-main-6);
      box-shadow:  0px 0px 12px 0px var(--color-black-5);
      color: var(--color-white-10);
    }
    .data-list-item.el-radio.is-checked:hover::v-deep .el-radio__label {
      background-color: var(--color-main);
      box-shadow:  0px 0px 12px 0px var(--color-black-5);
      color: var(--color-white-10);
    }  
  }
  .data-list-content-empty {
    width: 100%;
    height: 100%;
    background-color: var(--color-white-5);
    @include flex-all-center;
    flex-direction: column;
    // 无数据提示语
    .data-list-content-empty-text {
      color: var(--color-main-8);
      font-size: 28px;
    }
    // 无数据图标
    .data-list-content-empty-icon {
      color: var(--color-main-8);
      font-size: 80px;
    }
  }
}
.data-title-counts {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 36px;
  background-color: pink;
  border: 2px solid var(--color-main);
  border-radius: 4px;
  margin: 0 10px;
  @include inset-shadow-main-4;
  background: var(--color-white-10);
  .data-title-count {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    width: 28px;
    text-align: center;
    cursor: pointer;
    color: var(--color-main);
    transition: all 0.3s ease;
    &:hover {
      background-color: var(--color-main-8);
      color: var(--color-white-10);
    }
    &.current-unset {
      color: rgb(245, 108, 108);
      font-weight: bolder;
      &:hover {
        background-color: rgba(245, 108, 108, .4);
        color: var(--color-white-10);
      }
    }
  }
  .data-title-count-line {
    display: inline-block;
    width: 1px;
    height: 30px;
    background-color: var(--color-main-2);
  }
}
.step-action {
  position: absolute;
  @include flex-all-center;
  height: 80px;
  width: 40px;
  border: 1px solid var(--color-main);
  border-radius: 4px;
  background-color: var(--color-white-10);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  .step-icon {
    color: var(--color-main);
  }
}
.step-action:hover {
  background-color: var(--color-main);
  .step-icon {
    color: var(--color-white-10);
  }
}
.step-action.disabled {
  border: 1px solid var(--color-black-10);
  background-color: var(--color-gray-10);
  cursor: not-allowed;
  .step-icon {
    color: var(--color-white-10);
  }
}
.step-action.left {
  left: 15px;
}
.step-action.right {
  right: 15px;
}

</style>